<script setup>
import logo from "@/assets/logo.png"
import {reactive, ref} from "vue";
import axios from "axios";
import { ElMessage} from "element-plus";
import MyRouter from "@/router/RouterTable";
// import {Box, Document, Service, User, ShoppingCart, SuitcaseLine} from "@element-plus/icons-vue";

/**  页面config数据  **/
const layoutData = reactive({
  username: '未登录',
})


const headImg = reactive({
  flag: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
})

/**  前后端联动函数  **/
getUser()

function getUser(){
  console.log("执行getUser")
  axios({
    method:"GET",
    url:"http://localhost:8080/boot/user/getSession"
  }).then((result)=>{
    if(result != null){
      if (result.data.userHeadImg !== null) {
        headImg.flag = "http://localhost:8080/user-head-img/" + result.data.userHeadImg
      }

      layoutData.username=result.data.userName
      console.log("name:"+result.data)
    }
  })
}

function logout(){
  console.log("退出了")
  axios({
    method:"GET",
    url:"http://localhost:8080/boot/user/loginOut"
  }).then(()=>{
    layoutData.username="未登录"
    MyRouter.replace("/login")
    ElMessage({
      message:"登出成功",
      type:"success"
    })
  })
}


/***                  侧栏和tabs联动效果函数部分                           ***/

const editableTabsValue = ref('1')//绑定在tabs上的 选中的窗口变量
// tab数组
const editableTabs = ref([//对应映射tabs中的各个tab-pane数据
  {
    title: '首页',
    name: "/layout/userIndex"
  }
])

/** 添加标签页函数  参数为：tab-pane标题,router路径 **/
const addTab = (title, path) => {
  const tabs = editableTabs.value
  let flag = false//是否找到相同的数组
  tabs.forEach((tab) => {//如果相同名称的数组，则激活相应的标签页
    console.log("tab名字", tab.name, path)
    if (tab.name === path) {
      MyRouter.replace(tab.name)//切换页面
      editableTabsValue.value = tab.name//激活
      flag = true
    }
  })

  if (flag === false) {//如果没有相同名称的数组，则添加
    editableTabs.value.push({
      title: title,
      name: path,
    })
    editableTabsValue.value = path
    MyRouter.replace(path)
  }
}

/** 点击标签页函数 **/
const clickTab = (targetName) => {
  const tabs = editableTabs.value
  tabs.forEach((tab) => {
    if (tab.name === targetName.paneName) {
      MyRouter.push(tab.name)
    }
  })
}

/** 移除标签页函数 **/
const removeTab = (targetName) => {
  const tabs = editableTabs.value
  let activeName = editableTabsValue.value
  if (activeName === targetName) {//如果删除的是已选中的标签，那么就选择左边或者右边一个标签为选中状态
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }

  editableTabsValue.value = activeName
  MyRouter.replace(activeName);
  editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
}

</script>

<template>
  <el-scrollbar max-height="100vh">
    <div id="page">
      <!--  顶部导航栏  -->
      <el-menu
          class="el-menu-demo"
          mode="horizontal"
          :ellipsis="false"

          id="my-top"
          active-text-color="black"
          text-color="black"
      >
        <img
            style="width: 70px;padding-left:20px"
            :src="logo"
            alt="Element logo"
        />
        <el-text class="my-title">
          保险业务管理系统
        </el-text>
        <el-text>{{layoutData.username}}</el-text>
        <!--      <div class="flex-grow" />    //元素从右排列 -->
        <el-sub-menu index="1">
          <template #title>
            <!--    头像      -->
            <el-avatar :src="headImg.flag" />
          </template>
          <el-menu-item index="2-1" @click="addTab('个人信息','/layout/userInformation')" >
            <el-text type="primary">个人信息</el-text>
          </el-menu-item>
          <el-menu-item index="2-2" @click="logout()">
            <el-text type="danger" >登出</el-text>
          </el-menu-item>
          <el-menu-item index="2-3">设置</el-menu-item>
        </el-sub-menu>
      </el-menu>
      <el-container >
        <!--   侧边栏   -->
        <el-aside id="my-aside"  width="200px" >
          <!--    router 开启启用该模式会在激活导航时以 index 作为 path 进行路由跳转  -->
          <!--   使用 default-active 来设置加载时的激活项     -->
          <el-menu
              id="my-aside-menu"
              class="el-menu-vertical-demo"
              active-text-color="green"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><User/></el-icon>
                <span>客户管理</span>
              </template>
              <el-menu-item @click="addTab('客户信息','/layout/client/clientDefault')">
                <el-icon><User/></el-icon>
                <span>客户信息</span>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><box/></el-icon>
                <span>产品管理</span>
              </template>
              <el-menu-item @click="addTab('保险产品','/layout/insuranceProduct')">
                <el-icon><ShoppingCart /></el-icon>
                <span>保险产品</span>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><SuitcaseLine /></el-icon>
                <span>业务管理</span>
              </template>
              <el-menu-item @click="addTab('保单信息','/layout/insurancePolicy')">  <!--disabled属性可以让某item不能被点击-->
                <el-icon><Document/></el-icon>
                <span>保单信息</span>
              </el-menu-item>
              <el-menu-item @click="addTab('理赔流程','/layout/insuranceClaim')">
                <el-icon><service/></el-icon>
                <span>理赔流程</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <!--   显示区域   -->
        <el-main id="my-main">
          <el-tabs
              v-model="editableTabsValue"
              type="card"
              class="demo-tabs"
              closable
              @tab-remove="removeTab"
              @tab-click="clickTab"
          >
            <el-tab-pane
                v-for="item in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
            >
              <!--      {{ item.content }}-->
            </el-tab-pane>
          </el-tabs>
          <div id="indexPage">
            <el-card style="min-height: 80vh">
              <router-view></router-view>
            </el-card>
          </div>
        </el-main>
      </el-container>
    </div>
  </el-scrollbar>
</template>

<style scoped>
#page{
  height: 97vh;
  #my-top{
    height: 70px;
    background-color: white;
    .flex-grow {
      flex-grow: 1;
    }

    .my-title{
      font-size: 32px;
      margin:auto;
    }
  }

  #my-aside-menu{
    height: 100%;
    background-color: lightblue;
  }

  #my-main{

    #indexPage{
      padding: 20px;
    }
  }
}

</style>